.plugin-hub-detail {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .detail-header {
        padding: 12px 16px 12px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--Colors-Use-Neutral-Border);
        .header-title {
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
        }
        .header-btn {
            display: flex;
            align-items: center;
            gap: 8px;
        }
    }

    .detail-body {
        flex: 1;
        overflow: hidden;
        padding-right: 16px;
    }
}

.plugin-hub-detail-error {
    .plugin-hub-container {
        display: none;
    }
    .plugin-hub-detail-empty {
        display: block;
    }
}

.plugin-hub-container {
    :global {
        .ant-tabs-right {
            & > .ant-tabs-nav {
                .ant-tabs-nav-wrap {
                    margin-top: 12px;
                }
            }
        }
    }
}

.tab-pane-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    .detail-content {
        flex: 1;
        overflow: hidden;
        padding-top: 12px;
        .editer-body{
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 4px;
        }
    }
}
.tab-pane-exectue {
    width: 100%;
    height: 100%;
    padding-bottom: 12px;
    overflow: hidden overlay;
    display: flex;
    flex-direction: column;
    .execute-spin {
        display: flex;
        align-items: center;
        padding-top: 10%;
    }
}
.tab-pane-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plugin-hub-detail-empty {
    display: none;
    height: 100%;
    overflow: auto;
    padding-top: 10%;
    padding-bottom: 20px;
    .hint-style {
        white-space: pre-line;
    }
    .refresh-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 16px;
    }
}

.info-extra-node {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    .stared-icon {
        svg {
            color: var(--Colors-Use-Main-Primary);
        }
    }
}
